import screenfull from 'screenfull'
import delegates from '../../utils/delegates'
import * as icons from '../../utils/icons'
import {isMobile} from '../../utils/browser'

class Fullsreen {
  constructor (player) {
    console.log(player)
    this.player = player
    this.isFullscreen = false
    this.subEvents()

    delegates(this.player, this)
      .method('getFullscreen')
      .method('setFullscreen')

    this.player.dom.fullscreen.innerHTML = icons.full
  }

  subEvents () {
    this.player.dom.fullscreen.addEventListener('click', () => {
      this.setFullscreen(!this.isFullscreen)
    })
    screenfull.on('change', () => {
      this.isFullscreen = screenfull.element === this.player._container
      this.player.trigger('fullscreen', this.isFullscreen)
    })
    if (!isMobile()) {
      this.player.dom.videoWrap.addEventListener('dblclick', () => {
        this.player.getControls() && this.toggle()
      })
    }
  }

  toggle () {
    this.setFullscreen(!this.getFullscreen())
  }

  getFullscreen () {
    return this.isFullscreen
  }

  setFullscreen (status = true) {
    if (status && !this.isFullscreen) {
      if (screenfull.enabled) {
        screenfull.request(this.player._container)
      }
    }
    if (!status && this.isFullscreen) {
      screenfull.exit()
    }
  }
}

export default Fullsreen
